<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>OpenLayers Map Initialization</title>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css">  
    <script src="./ol.js"></script>  
    <style>  
        .map {  
            height: 100vh; /* 设置地图容器高度为视口高度 */  
            width: 100%;   /* 设置地图容器宽度为100% */  
        }  
    </style>  
</head>  
<body>  
    <div id="map" class="map"></div>  
    <script>  
			// wprd0{1-4}.is.autonavi.com/appmaptile? 是高德地图提供的一种瓦片地图服务地址模板。以下是对该服务地址的详细解释和使用方法：
			// 地址结构
			// 基础URL：wprd0{1-4}.is.autonavi.com/appmaptile?
			// wprd0{1-4}：表示服务器地址的前缀，其中 {1-4} 是一个占位符，表示实际请求时可能会访问 wprd01、wprd02、wprd03 或 wprd04 中的任意一个服务器，以实现负载均衡。
			// 查询参数：
			// x={x}、y={y}、z={z}：分别表示瓦片的 X、Y 坐标和缩放级别。这些是请求瓦片时必须提供的参数。
			// lang=zh_cn：设置语言为中文。如果需要英文，可以将其更改为 en。
			// size=1：通常用于设置瓦片的大小，但在此上下文中可能不起作用或已被弃用。
			// scl={1|2}：用于设置是否显示标注。scl=1 表示显示标注（注记），scl=2 表示不显示标注（仅底图）。
			// style={6|7|8}：用于设置瓦片的类型。style=6 表示影像底图（不含路网、不含注记），style=7 表示矢量路网（含路网、可能含注记，取决于 scl 的值），style=8 表示影像路网（含路网、可能含注记，也取决于 scl 的值）。
		  
			// 初始化OpenLayers地图  
			var map = new ol.Map({  
					target: 'map', // 指定地图容器的ID  
					layers: [  
						new ol.layer.Tile({
							source: new ol.source.XYZ({
								// 地图源   设置不对出不来地图
								url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',
								projection: 'EPSG:3857',	
								crossOrigin: '*',
							})
						}),
						new ol.layer.Tile({
							source: new ol.source.XYZ({
								// 地图源   设置不对出不来地图
								url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
								projection: 'EPSG:3857',	
								crossOrigin: '*',
							})
						})
					],  
					view: new ol.View({ // 创建视图  
						center: ol.proj.fromLonLat([113.61827, 22.98614]), // 设置地图中心点（经纬度），需要转换为视图投影（这里以北京为例）  
						zoom: 16 // 设置初始缩放级别  
					})  
			});  
			
			function showPolygonBytmap(){
				// 定义多边形的经纬度坐标数组  
				var polygonLatLng = [  
					[113.618622,22.990629], // 右上角  
					[113.61827,22.98614], // 右下角  
					[113.614382,22.981913], // 左下角  
					[113.619545,22.986059], // 左下角到右上角的对角线（为闭合多边形，实际上应与第一个点相同，但这里为了展示对角线）  
					[113.618622,22.990629], // 回到起点，闭合多边形（此步通常必要，但在此例中为了说明对角线而重复）  
				];  
			
				// 注意：为了闭合多边形，首尾坐标应相同，但在此例中我们展示了对角线，所以最后又加了起点坐标  
				// 在实际应用中，只需确保首尾坐标一致即可闭合多边形  
			
				// 转换经纬度坐标为视图投影坐标  
				var polygonCoords = polygonLatLng.map(function(coord) {  
					return ol.proj.fromLonLat(coord);  
				});  
			
				// 由于ol.geom.Polygon需要一个二维数组（表示线性环），我们包装转换后的坐标  
				var polygonRing = [polygonCoords];  
			
				// 创建多边形几何对象  
				var polygon = new ol.geom.Polygon(polygonRing);  
			
				// 创建特征并设置几何对象  
				var feature = new ol.Feature(polygon);  
			
				// 创建矢量数据源并添加特征  
				var vectorSource = new ol.source.Vector({  
					features: [feature],  
				});  
			
				// 创建矢量图层并设置数据源  
				var vectorLayer = new ol.layer.Vector({  
					source: vectorSource,  
					style: new ol.style.Style({  
						stroke: new ol.style.Stroke({  
							color: 'rgba(255, 51, 255, 1)',  
							width: 4,  
						}),  
						fill: new ol.style.Fill({  
							color: 'rgba(23, 145, 252, 0.4)',  
						}),  
					}),  
				});  
				
				// 将矢量图层添加到地图中  
				map.addLayer(vectorLayer);  
			}
			
			// 画圆形围栏（openlayer）
			function showCircleBytmap(longt,ltat,radiusInMeters){
				// 将经纬度转换为视图坐标（如果需要的话，这步在创建视图时已经做了）  
				const center = ol.proj.fromLonLat([longt, ltat]);  
				  
				// 创建一个表示圆的几何形状  
				const circleGeometry = new ol.geom.Circle(center, radiusInMeters); // radiusInMeters 是圆的半径，单位为米  
				  
				// 创建一个矢量源并将圆几何形状添加到其中  
				const vectorSource = new ol.source.Vector({  
				  features: [new ol.Feature(circleGeometry)],  
				});  
				  
				// 创建一个矢量图层并将源添加到其中  
				const vectorLayer = new ol.layer.Vector({  
				  source: vectorSource,  
				  style: new ol.style.Style({  
				    stroke: new ol.style.Stroke({  
				      color: 'rgba(255, 0, 0, 1)',  
				      width: 2,  
				    }),  
				    fill: new ol.style.Fill({  
				      color: 'rgba(255, 0, 0, 0.1)',  
				    }),  
				  }),  
				});  
				  
				// 将矢量图层添加到地图中  
				map.addLayer(vectorLayer); 
			}
			
			
			function drawOverlay(){
				// 创建图片注记
				const image = new Image();
				image.src = './camera2.png'; // 替换为你的图片路径
				image.width = 48; // 设置图片大小
				image.height = 48;
				 
				const overlay = new ol.Overlay({
					element: image,
					position: ol.proj.fromLonLat([113.619545,22.986059]), // 设置初始位置
					offset: [0, -48], // 设置偏移量，以屏幕像素为单位
					autoPan: true,
				});
				 
				// overlay.getElement().addEventListener('click', ()=> {
				// 	this.videoTitle = name;
				// 	this.videoShow = true;
				// 	this.loadVideo(id);
				// });
				
				map.addOverlay(overlay);
			}
			
			drawOverlay()
			
			showPolygonBytmap()
			
			showCircleBytmap(113.623714,22.990471,150)
    </script>  
</body>  
</html>